<template>
  <div style="100%">
    <div style="text-align: center; font-size: 40px; height: 60px">----微信登录----</div>
    <div class="flex justify-center align-items" style="width: 600px; height: calc(100% - 60px)">
      <div class="column justify-center" style="height: 100%">
        <div v-if="!isOverdue" class="column justify-center" style="height: 75%">
          <img
            src="/static/images/010.png"
            class="illustration"
            alt="Illustration"
            v-if="isScanCode"
          />
          <img :src="qrCodeUrl" class="illustration" alt="Illustration" v-else />
        </div>
        <div v-else style="height: 75%" class="column justify-center">
          <img src="/static/images/009.png" class="illustration" @click="refershCode" />
        </div>
        <div style="height: 25%">
          <div style="text-align: center; color: #333333" v-if="!isScanCode">
            <el-checkbox v-model="isAvoidScanCode" label="15天内免扫码登录" />
          </div>
          <div style="text-align: center; color: #333333" v-else>
            <div style="color: #aaa">在微信中选择账号登录</div>
            <div style="color: #5fa1f2" @click="refershCode">重新扫码</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import QRCode from 'qrcode'
import Cookies from 'js-cookie'
const qrCodeUrl = ref('/static/images/009.png')
const Code = ref({
  info: 'abcdefg'
})
onMounted(() => {
  getQRCode()
})
const getQRCode = async () => {
  // 使用函数生成二维码
  await generateQRCode(`https://www.yoyangyun.com/login?Code=${Code.value}&SystemID=1&ProdID=1`)
  GetCodeStatus()
}
const GetCodeStatus = () => {}

const router = useRouter()
const isScanCode = ref(false)
const isOverdue = ref(false) //是否过期
const timer = ref(0)
const generateQRCode = async (text) => {
  try {
    const opts = {
      errorCorrectionLevel: 'H',
      type: 'image/png',
      quality: 0.3,
      margin: 1
    }
    const qrImage = await QRCode.toDataURL(text, opts)
    // console.log(qrImage)
    // 可以在这里将qrImage插入到HTML中的某个元素，比如一个<img>标签
    qrCodeUrl.value = qrImage
  } catch (error) {
    console.error(error)
    ElMessage({
      message: error,
      type: 'error'
    })
  }
}

const loginSuccess = async () => {
  const now = new Date()
  let days = 0
  if (isAvoidScanCode.value) {
    days = 15
  }
  now.setDate(now.getDate() + days)
  const expireTime = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0) // 设置为当天00:00过期
  Cookies.set('isLogin', true, { expires: expireTime })
  router.push('/')
  loginAfter()
}

const loginAfter = () => {}

const isAvoidScanCode = ref(false)
const refershCode = async () => {
  isOverdue.value = false
  isScanCode.value = false
  getQRCode()
}

onUnmounted(() => {
  clearTimeout(timer.value)
})
</script>

<style scoped>
.illustration {
  width: 200px;
  height: 200px;
}
</style>
